<template>
  <div class="storetable" style=" width:80%">
    <el-table
    :data="stores.filter(data => !search || data.store_name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    <el-table-column
      label="门店名"
      prop="store_name">
    </el-table-column>
    <el-table-column
      label="门店地址"
      prop="store_address">
    </el-table-column>
    <el-table-column
      label="审核状态"
      prop="store_examine">
    </el-table-column>
    <el-table-column
      align="right"
     >
      <template slot="header" slot-scope="scope" >
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
          type="primary"
       
          size="mini"
          style="width:50px"
          @click="handleEdit(scope.$index, scope.row)">审核</el-button>
        <el-button
          size="mini"
          style="width:50px"
          @click="handleLook(scope.$index, scope.row)">查看</el-button>
        <el-button
          size="mini"
          style="width:50px"
          @click="handlePeople(scope.$index, scope.row)">员工</el-button>
        <el-button
          size="mini"
          type="danger"
          style="width:50px"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>

        <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        ref="refRuleForm"
        label-width="200px"
        class="demo-ruleForm"
      >
        <el-form-item label="门店名称" prop="roleName">
        <el-input v-model="ruleForm.store_name"></el-input>
        </el-form-item>

        <el-form-item label="营业执照" prop="roleName">
        <el-input v-model="ruleForm.store_license_number"></el-input>
        </el-form-item>

        <el-form-item label="营业地址" prop="roleName">
        <el-input v-model="ruleForm.store_address"></el-input>
        </el-form-item>

        <el-form-item label="定位" prop="roleName">
        <el-input v-model="ruleForm.store_location"></el-input>
        </el-form-item>
        
        <el-form-item label="法人" prop="roleName">
        <el-input v-model="ruleForm.store_master"></el-input>
        </el-form-item>

        <el-form-item label="联系方式" prop="roleName">
        <el-input v-model="ruleForm.store_tel"></el-input>
        </el-form-item>

        <el-form-item label="特色" prop="roleName">
        <el-input v-model="ruleForm.store_special"></el-input>
        </el-form-item>

        <el-form-item label="佣金比例" prop="roleName">
        <el-input v-model="ruleForm.store_commission"></el-input>
        </el-form-item>

        <el-form-item label="vip等级" prop="roleName">
        <el-input v-model="ruleForm.store_vip"></el-input>
        </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" >确 定</el-button>
        </span>
    </el-dialog>
<!--  -->
        <el-dialog
        :title="title"
        :visible.sync="dialogVisibles"
        width="40%"
        :before-close="handleCloses"
    >
      <!-- <el-form
        :model="staffs"
        ref="refRuleForm"
        label-width="200px"
        class="demo-ruleForm"
      > -->
        <el-table
        :data="staffs"
        style="width: 100%">
        <el-table-column
          prop="staff_name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="staff_level"
          label="等级"
          width="180">
        </el-table-column>
        <el-table-column
          prop="staff_tel"
          label="联系方式">
        </el-table-column>
        </el-table>

        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibles = false">取 消</el-button>
        <el-button type="primary" >确 定</el-button>
        </span>
      <!-- </el-form> -->
    </el-dialog>
    
      </template>
    </el-table-column>
  </el-table>
  <Modal v-show="isLoading"><Center><Loading v-show="isLoading"/></Center></Modal>
  </div>
</template>

<script>
import { getStoreList } from '@/services/StoreInfo.js';
import { deleteStore } from '@/services/StoreInfo.js';
import { CheckStore } from '@/services/StoreInfo.js';
import { foundStaff} from '@/services/StaffInfo.js'

import Loading from '@/components/Loading.vue'
import Modal from '@/components/Modal.vue'
import Center from '@/components/Center.vue'
//导入方法
  export default {
    components:{Loading,Modal,Center},
    async created(){
      this.isLoading = true;
      var resp  =await getStoreList();
      this.stores=resp;
      console.log(resp)
      this.isLoading = false;
    },
    data(){
      return{
        isLoading:false,
        search:"",
        stores:[],
        ruleForm:{
          store_name:""
        },
        staffs:{
          staff_name:"",
          staff_level:"",
          staff_vip:""
        },
        dialogVisible:false,//查看弹窗
        dialogVisibles:false,//员工弹窗
        title:""
      }
    },    
    methods: {
     async handleEdit(index, row) {
      //审核
        this.$confirm("确定已经审核完成该门店？",{
          confirmButton: '确定',
          confirmButton: '取消',
        }).then(async (resp)=>{
          console.log(resp);
          if(resp){
           await CheckStore(row.store_id).then((res)=>{
              location.reload();
            })
          }
        }).catch(err => err)
        console.log(index, row);  
      },
      //删除
      async handleDelete(index, row) {
        this.$confirm("你确定要删除该门店的信息吗？",{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'danger'
        }).then(async(resp)=>{
          if(resp){
            await deleteStore(row.store_id).then((res) =>{
              location.reload();
              // 刷新
          })
          }
        }).catch(err => err)
      },
      //查看
      async handleLook(index, row){ 
        this.dialogVisible = true
        this.ruleForm=row;
      },
      handleClose(done) {
      this.dialogVisible = false;
      },
      //员工
      async handlePeople(index, row){
        this.staffs = row.staffs
        console.log(this.staffs);
        this.dialogVisibles = true
      },
      handleCloses(done) {
      this.dialogVisibles = false;
      },

    }
  }
</script>
<style>
  .storetable{
    margin:100px auto
  }
</style>